<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点点赚</title>
    <!-- <link rel="stylesheet" href="./H5.css"> -->
    <link rel="stylesheet" href="https://gitee.com/liang-ji106397/diandian-earns-money/raw/master/H5.css">
</head>

<body>
    <h2>点点赚脚本-035</h2>
    <div class="container" ontouchstart="handleTouchStart(event)" ontouchmove="handleTouchMove(event)">
        <div id="home" class="page active">
            <div class="as">
                <div class="login-box">
                    <h4>登录</h4>
                    <form id="myForm">
                        <input type="text" id="alipay" name="alipay" placeholder="提现支付宝账号">
                        <input type="text" id="nickname" name="nickname" placeholder="账号姓名">
                        <div class="checkbox-container">
                            <label class="checkbox0" for="checkbox0">兑换</label>
                            <input type="checkbox" id="checkbox0" name="checkbox0">
                        </div>
                        <div class="checkbox-container">
                            <div class="checkboxs">
                                <input type="checkbox" id="checkbox1" name="checkbox1">
                                <label class="checkbox1" for="checkbox1">文章推荐</label><br>
                            </div>
                            <div class="checkboxs">
                                <input type="checkbox" id="checkbox2" name="checkbox2">
                                <label class="checkbox2" for="checkbox2">优质公众号推荐</label><br>
                            </div>
                            <div class="checkboxs">
                                <input type="checkbox" id="checkbox3" name="checkbox3">
                                <label class="checkbox3" for="checkbox3">文章点赞再看</label><br>
                            </div>
                            <div class="checkboxs">
                                <input type="checkbox" id="checkbox4" name="checkbox4">
                                <label class="checkbox4" for="checkbox4">优质视频号推荐</label><br>
                            </div>
                        </div>
                        <!-- <div class="radio-container">
                            <div class="radios">
                                <input type="radio" id="radio1" name="radio-group" value="radio1">
                                <label class="labels" for="radio1">单选框 1</label><br>
                            </div>
                            <div class="radios">
                                <input type="radio" id="radio2" name="radio-group" value="radio2">
                                <label class="labels" for="radio2">单选框 2</label><br>
                            </div>
                            <div class="radios">
                                <input type="radio" id="radio3" name="radio-group" value="radio3">
                                <label class="labels" for="radio3">单选框 3</label><br>
                            </div>
                        </div>
                        <div class="custom-dropdown">
                            <select name="dropdown">
                                <option value="option1">Option 1</option>
                                <option value="option2">Option 2</option>
                                <option value="option3">Option 3</option>
                                <option value="option4">Option 4</option>
                            </select>
                        </div>
                        <div class="rich-text-editor" id="richText" contenteditable="true"></div> -->
                        <button type="submit">开始</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- <div id="about" class="page">
            <div class="as">
                <h3>这是关于页内容</h3>
            </div>
        </div>
        <div id="contact" class="page">
            <div class="as">
                <h3>这是设置页内容</h3>
                <p>为帮助网页开发者实现与微信客户端一致的视觉体验，并降低设计和开发成本，微信团队推出了网页设计Q样
                    式库：WeUl.
                    该样式库目前包含button(按钮)、cell(单元格)、toast(浮层提示)、dialogQ(对话框)等网页常用的各式元
                    素，并已在GitHub上开源。
                    开发者只需三步，就能在自己的网页上轻松实现按钮、浮层提示等功能：
                    1.根据文档说明，下载W©U!库。
                    2.在页面中引入weui.min.css文件。
                    3.从官方d©mo中拷贝需要的功能组件代码到自己页面即可。
                    WU‖是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以
                    令用户的使用感知更加统一。在微信网页开发中使用WLU儿，有如下优势：
                    1、同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站
                    2、便捷获取快速使用，降低开发和设计成本
                    3、微信设计团队精心打造，清晰明确，简洁大方</p>
            </div>
        </div>
        <div class="navbar">
            <a href="#" onclick="showPage('home', this)" class="active">首页</a>
            <a href="#" onclick="showPage('about', this)">关于</a>
            <a href="#" onclick="showPage('contact', this)">设置</a>
        </div> -->
    </div>
    <!-- <script src="autox://sdk.v1.js"></script> -->
    <script>
        window.onload = function () {
            //调用安卓端
            $autox.callHandler("getConfig", "config", (arg) => {
                let data = JSON.parse(arg)
            if (Object.keys(data).length === 0) {
                return
            }
            // 填充用户名和密码
            document.getElementById("alipay").value = data.alipay;
            document.getElementById("nickname").value = data.nickname;

            // 填充复选框状态
            data["checkbox"].forEach((checkbox) => {
                document.getElementById(checkbox.id).checked = true
            })
            });
        };
        // var xDown = null;
        // var yDown = null;

        // function handleTouchStart(evt) {
        //     xDown = evt.touches[0].clientX;
        //     yDown = evt.touches[0].clientY;
        // }

        // function handleTouchMove(evt) {
        //     if (!xDown || !yDown) {
        //         return;
        //     }

        //     var xUp = evt.touches[0].clientX;
        //     var yUp = evt.touches[0].clientY;

        //     var xDiff = xDown - xUp;
        //     var yDiff = yDown - yUp;

        //     if (Math.abs(xDiff) > Math.abs(yDiff)) {/* most significant*/
        //         if (xDiff > 0) {
        //             /* left swipe */
        //             navigate('next');
        //         } else {
        //             /* right swipe */
        //             navigate('prev');
        //         }
        //     }
        //     /* reset values */
        //     xDown = null;
        //     yDown = null;
        // }

        // //底部导航变换
        // function navigate(direction) {
        //     var pages = document.querySelectorAll('.page');
        //     var activePage = document.querySelector('.page.active');
        //     var activeIndex = Array.from(pages).indexOf(activePage);

        //     if (direction === 'next' && activeIndex < pages.length - 1) {
        //         showPage(pages[activeIndex + 1].id);
        //     } else if (direction === 'prev' && activeIndex > 0) {
        //         showPage(pages[activeIndex - 1].id);
        //     }
        // }

        // //页面变换
        // function showPage(pageId) {
        //     var pages = document.querySelectorAll('.page');
        //     for (var i = 0; i < pages.length; i++) {
        //         pages[i].classList.remove('active');
        //     }
        //     document.getElementById(pageId).classList.add('active');

        //     var links = document.querySelectorAll('.navbar a');
        //     for (var j = 0; j < links.length; j++) {
        //         links[j].classList.remove('active');
        //         if (links[j].getAttribute('onclick').includes(pageId)) {
        //             links[j].classList.add('active');
        //         }
        //     }
        // }

        //监听表单提交按钮
        document.getElementById('myForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止默认表单提交行为

            // 获取表单数据
            const formData = new FormData(this);

            // 将数据转换为对象
            const data = {};
            data['checkbox'] = []
            formData.forEach((value, key) => {
                if (key.indexOf('checkbox') === 0) {
                    var text = this.querySelector(`.${key}`).textContent;
                    data['checkbox'].push({ 'task': text, "id": key })
                } else {
                    data[key] = value;
                }
            });
            //调用安卓端
            $autox.callHandler("postConfig", JSON.stringify(data), (data) => {
                console.log(data)
            });
        });

    </script>
</body>

</html>